<template>
  <div style="background-image: url('../../../assets/background.jpg'); width: 100%; height: 100%">
    <img src="../../../assets/background.jpg" width="100%" height="100%" style="object-fit: cover; position: fixed;top:0;left:0;">
    <div id="loginForm">
      <h1>登录</h1>
      <el-form ref="loginForm" :model="loginForm" :rules="loginRules" autocomplete="on" label-position="left">
        <el-form-item prop="userName">
          <el-input
            ref="username"
            v-model="loginForm.userName"
            placeholder="请输入电话/邮箱"
            name="userName"
            type="text"
            tabindex="1"
            autocomplete="on"
          />
        </el-form-item>
        <el-tooltip v-model="capsTooltip" content="Caps lock is On" placement="right" manual>
          <el-form-item prop="password">
            <el-input
              v-model="loginForm.password"
              placeholder="请输入登录密码"
              autocomplete="on"
              @keyup.native="checkCapslock"
              @blur="capsTooltip = false"
              @keyup.enter.native="loginHandler"
              show-password
            />
          </el-form-item>
        </el-tooltip>
          <el-button id="submit" type="primary" size="min" @click="loginHandler" :loading="loading">登录</el-button>
      </el-form>
    </div>
  </div>
</template>

<script>
import {setToken, getToken} from '../../../utils/auth'
export default {
  name: 'Login',
  data() {
    const validateUsername = (rule, value, callback) => {
      if(value) {
        let that = this
        if(!that.Regular(value)){
          callback(new Error('请输入正确的电话号码或邮箱'))
        }else {
          callback()
        }
      }else {
        callback(new Error('请输入电话号码或邮箱'))
      }
    }
    const validatePassword = (rule, value, callback) => {
      if (value.length < 6) {
        callback(new Error('请输入登录密码'))
      } else {
        callback()
      }
    }
    return {
      loginForm: {
        userName: '',
        password: ''
      },
      loginRules: {
        userName: [{ required: true, trigger: 'blur', validator: validateUsername }],
        password: [{ required: true, trigger: 'blur', validator: validatePassword }]
      },
      capsTooltip: false,
      passwordType: 'password',
      loading: false
    }
  },
  methods: {
    loginHandler() {
      this.$refs['loginForm'].validate((vales) => {
        if (vales){
          this.loading = true;
          let that = this;
          that.$post("login", this.loginForm).then((res)=>{
            this.loading = false;
            setToken('Bearer ' + res.data)
            this.$router.replace('/index')
          }).catch((error) => {
            this.loading = false;
          })
        }
      })
    },
    checkCapslock(e) {
      const { key } = e
      this.capsTooltip = key && key.length === 1 && (key >= 'A' && key <= 'Z')
    },
    Regular(value){
      const emailRegual = '^([a-z]|[A-Z]|[0-9])+@([a-z]|[A-Z]|[0-9])+.com$';
      const phoneRegual = '^1[35789][0-9]{9}$';
      let reg = new RegExp(emailRegual);
      if(reg.test(value)) {
        return true
      }
      reg = new RegExp(phoneRegual)
      return reg.test(value);
    }
  }
}
</script>

<style scoped>
  #loginForm {
    width: 350px;
    position: absolute;
    top: 30%;
    right: 20%;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 7px;
    background-color: aliceblue;
    box-shadow: 5px 5px 5px 0 rgba(0, 0, 0, 0.1);
    padding: 20px 20px 30px;
  }
  #submit {
    width: 100%;
  }
</style>
